<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex 布局示例</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        .demo-section {
            margin-bottom: 30px;
            border: 1px solid #e4e7ed;
            border-radius: 4px;
            padding: 20px;
            background: #fff;
        }

        h2 {
            color: #2c3e50;
            border-bottom: 2px solid #1976d2;
            padding-bottom: 10px;
            margin-top: 0;
        }

        h3 {
            color: #1976d2;
            margin-top: 0;
        }

        /* 基础等分布局 */
        .flex-container {
            display: flex;
            border: 2px solid #e4e7ed;
            margin-bottom: 20px;
            min-height: 100px;
        }

        .flex-item {
            padding: 20px;
            background: #ecf5ff;
            border: 1px solid #409eff;
            margin: 5px;
            text-align: center;
        }

        .flex-1 {
            flex: 1;
        }

        /* 左固定右自适应 */
        .fixed-flex {
            display: flex;
            border: 2px solid #e4e7ed;
            margin-bottom: 20px;
            min-height: 100px;
        }

        .fixed-width {
            width: 200px;
            background: #fef0f0;
            border: 1px solid #f56c6c;
            margin: 5px;
            padding: 20px;
            text-align: center;
        }

        .flex-auto {
            flex: 1;
            background: #f0f9eb;
            border: 1px solid #67c23a;
            margin: 5px;
            padding: 20px;
            text-align: center;
        }

        /* 不同比例布局 */
        .ratio-container {
            display: flex;
            border: 2px solid #e4e7ed;
            margin-bottom: 20px;
            min-height: 100px;
        }

        .flex-2 {
            flex: 2;
            background: #fdf6ec;
            border: 1px solid #e6a23c;
            margin: 5px;
            padding: 20px;
            text-align: center;
        }

        /* 代码展示区域 */
        .code-container {
            background: #f8f9fa;
            border-radius: 4px;
            padding: 15px;
            margin-top: 10px;
            position: relative;
        }

        .code-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #1976d2;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .copy-btn {
            padding: 4px 12px;
            background: #409eff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }

        .copy-btn:hover {
            background: #66b1ff;
        }

        pre {
            margin: 0;
            white-space: pre-wrap;
            font-family: Consolas, Monaco, 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.5;
            color: #333;
            background: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
        }

        /* 说明部分 */
        .notes {
            background: #f4f4f5;
            padding: 15px;
            border-radius: 4px;
            margin-top: 20px;
        }

        .notes h4 {
            margin-top: 0;
            color: #606266;
        }

        .notes ul {
            margin: 0;
            padding-left: 20px;
            color: #606266;
        }

        .notes li {
            margin: 5px 0;
        }

        /* Gap 布局样式 */
        .gap-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            border: 2px solid #e4e7ed;
            padding: 20px;
            margin-bottom: 20px;
            background: #fff;
        }

        .gap-row-col {
            display: flex;
            flex-wrap: wrap;
            row-gap: 30px;
            column-gap: 20px;
            border: 2px solid #e4e7ed;
            padding: 20px;
            margin-bottom: 20px;
            background: #fff;
        }

        .gap-item {
            flex: 1;
            min-width: 200px;
            height: 80px;
            background: #e1f3d8;
            border: 1px solid #67c23a;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #333;
        }

        /* 在 notes 中添加 gap 说明 */
        .gap-notes {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #dcdfe6;
        }
    </style>
</head>
<body>
    <h2>Flex 布局示例</h2>

    <!-- 基础等分布局 -->
    <div class="demo-section">
        <h3>1. 基础等分布局</h3>
        <div class="flex-container">
            <div class="flex-item flex-1">flex: 1</div>
            <div class="flex-item flex-1">flex: 1</div>
            <div class="flex-item flex-1">flex: 1</div>
        </div>

        <div class="code-container">
            <div class="code-title">
                <span>HTML:</span>
                <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
            </div>
            <pre><code>&lt;div class="flex-container"&gt;
  &lt;div class="flex-item flex-1"&gt;flex: 1&lt;/div&gt;
  &lt;div class="flex-item flex-1"&gt;flex: 1&lt;/div&gt;
  &lt;div class="flex-item flex-1"&gt;flex: 1&lt;/div&gt;
&lt;/div&gt;</code></pre>

            <div class="code-title">
                <span>CSS:</span>
                <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
            </div>
            <pre><code>.flex-container {
  display: flex;
}

.flex-item {
  flex: 1;
}</code></pre>
        </div>
    </div>

    <!-- 左固定右自适应 -->
    <div class="demo-section">
        <h3>2. 左固定右自适应布局</h3>
        <div class="fixed-flex">
            <div class="fixed-width">固定宽度 200px</div>
            <div class="flex-auto">自适应宽度 flex: 1</div>
        </div>

        <div class="code-container">
            <div class="code-title">
                <span>HTML:</span>
                <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
            </div>
            <pre><code>&lt;div class="fixed-flex"&gt;
  &lt;div class="fixed-width"&gt;固定宽度 200px&lt;/div&gt;
  &lt;div class="flex-auto"&gt;自适应宽度&lt;/div&gt;
&lt;/div&gt;</code></pre>

            <div class="code-title">
                <span>CSS:</span>
                <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
            </div>
            <pre><code>.fixed-flex {
  display: flex;
}

.fixed-width {
  width: 200px;
}

.flex-auto {
  flex: 1;
}</code></pre>
        </div>
    </div>

    <!-- 不同比例布局 -->
    <div class="demo-section">
        <h3>3. 不同比例布局</h3>
        <div class="ratio-container">
            <div class="flex-2">flex: 2</div>
            <div class="flex-item flex-1">flex: 1</div>
            <div class="flex-item flex-1">flex: 1</div>
        </div>

        <div class="code-container">
            <div class="code-title">
                <span>HTML:</span>
                <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
            </div>
            <pre><code>&lt;div class="ratio-container"&gt;
  &lt;div class="flex-2"&gt;flex: 2&lt;/div&gt;
  &lt;div class="flex-1"&gt;flex: 1&lt;/div&gt;
  &lt;div class="flex-1"&gt;flex: 1&lt;/div&gt;
&lt;/div&gt;</code></pre>
        </div>
    </div>

    <!-- 在不同比例布局后添加 gap 布局示例 -->
    <div class="demo-section">
        <h3>4. Gap 间距布局</h3>
        
        <!-- gap 基础用法 -->
        <div class="gap-container">
            <div class="gap-item">gap: 20px</div>
            <div class="gap-item">gap: 20px</div>
            <div class="gap-item">gap: 20px</div>
        </div>

        <!-- 行列不同间距 -->
        <div class="gap-row-col">
            <div class="gap-item">row-gap: 30px</div>
            <div class="gap-item">column-gap: 20px</div>
            <div class="gap-item">不同行列间距</div>
            <div class="gap-item">不同行列间距</div>
            <div class="gap-item">不同行列间距</div>
            <div class="gap-item">不同行列间距</div>
        </div>

        <div class="code-container">
            <div class="code-title">
                <span>HTML:</span>
                <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
            </div>
            <pre><code>&lt;!-- 统一间距 --&gt;
&lt;div class="gap-container"&gt;
  &lt;div class="gap-item"&gt;gap: 20px&lt;/div&gt;
  &lt;div class="gap-item"&gt;gap: 20px&lt;/div&gt;
  &lt;div class="gap-item"&gt;gap: 20px&lt;/div&gt;
&lt;/div&gt;

&lt;!-- 行列不同间距 --&gt;
&lt;div class="gap-row-col"&gt;
  &lt;div class="gap-item"&gt;item 1&lt;/div&gt;
  &lt;div class="gap-item"&gt;item 2&lt;/div&gt;
  &lt;div class="gap-item"&gt;item 3&lt;/div&gt;
&lt;/div&gt;</code></pre>

            <div class="code-title">
                <span>CSS:</span>
                <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
            </div>
            <pre><code>/* 统一间距 */
.gap-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* 行列不同间距 */
.gap-row-col {
  display: flex;
  flex-wrap: wrap;
  row-gap: 30px;     /* 行间距 */
  column-gap: 20px;  /* 列间距 */
}</code></pre>
        </div>
    </div>

    <!-- 说明部分 -->
    <div class="notes">
        <h4>flex: 1 说明：</h4>
        <ul>
            <li>flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0% 的简写</li>
            <li>flex-grow: 1 - 定义项目的放大比例</li>
            <li>flex-shrink: 1 - 定义项目的缩小比例</li>
            <li>flex-basis: 0% - 定义项目在分配剩余空间之前的基准大小</li>
        </ul>

        <!-- 新增 gap 说明 -->
        <div class="gap-notes">
            <h4>gap 说明：</h4>
            <ul>
                <li>gap: 设置网格行与列之间的间隙</li>
                <li>row-gap: 设置行间距</li>
                <li>column-gap: 设置列间距</li>
                <li>gap: 20px 等同于 row-gap: 20px 和 column-gap: 20px</li>
                <li>gap: 30px 20px 表示行间距为 30px，列间距为 20px</li>
            </ul>
        </div>
    </div>

    <script>
        function copyCode(btn) {
            const pre = btn.parentElement.nextElementSibling;
            const code = pre.textContent;
            
            navigator.clipboard.writeText(code).then(() => {
                const originalText = btn.textContent;
                btn.textContent = '已复制！';
                setTimeout(() => {
                    btn.textContent = originalText;
                }, 2000);
            });
        }
    </script>
</body>
</html>